<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class="pa cfff" to="/myWash" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>
                维修记录
            </h1>
        </header>
        <main>
            <div class="tc code" v-if="dataArr.orderStatus == 1">
                <h2 class="f30 fn">核销码：<span class="f25">{{ dataArr.verification }}</span></h2>
                <qrCode :code="dataArr.verification"></qrCode>
            </div>
            <div class="wash-info">
                <h1 class="fn f30">维修信息</h1>
                <div>
                    <p>维修单号:<span>{{ dataArr.serviceCode }}</span></p>
                    <p>维修状态:<span>{{ dataArr.orderStatus == 1 ? '进行中' : '已完成' }}</span></p>
                    <p>车主姓名:<span>张</span></p>
                    <p>联系方式:<span>{{ dataArr.userTel }}</span></p>
                    <p>维修方式:<span>上门取车</span></p>
                    <p>取车位置:<span>{{ dataArr.businessArea }}</span></p>
                    <p>预约日期:<span>{{ dataArr.createdDate }}</span></p>
                    <p>提交日期:<span>{{ dataArr.modifyDate }}</span></p>
                </div>
            </div>
            <div class="car-info">
                <h1 class="fn f30">维修信息</h1>
                <div>
                    <p>车辆信息:<span>大客车</span></p>
                    <p>车牌号:<span>豫J23123</span></p>
                    <p class="car-img">整车照片:</p>
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                    <p class="car-img">维修部位图片:</p>
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                </div>
            </div>
            <p style="height: 1rem; margin-top: -178rem;"></p>
        </main>
        <footer class="tr bcfff pf" v-if="dataArr.orderStatus == 1">
            <button class="tc cfff" @click="cancelOrder">取消订单</button>
        </footer>
    </div>
</template>
<script>
import { orderList } from '../../../api/using';
import qrCode from '../../../components/qrCode.vue';

export default {
    components: {qrCode},
    data() {
        return {
            dataArr: {}
        }
    },
    mounted() {
        this.init(this.$route.query.id);
    },
    methods: {
        init(id) {
            orderList({ userId: this.$route.query.userId })
                .then(r => {
                    console.log(r);
                    let arr = r.data.filter(el => el.id == id)
                    this.dataArr = arr[0];
                })
                .catch(e => {
                })
        },
        cancelOrder() {
            this.$dialog.confirm({
                title: '确认取消预约吗',
                confirmButtonColor: '#2377f3',
                // width: '710rem'
            })
                .then(() => {
                    console.log('确认');
                })
                .catch(() => {
                    console.log('取消');
                });
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}


header {
    background-color: #3284fc;
    height: 434rem;
    padding: 60rem 20rem 0 20rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

main {
    padding: 0 20rem;
}

main>div {
    z-index: 0;
    position: relative;
    top: -290rem;
    border-radius: 20rem;
    background-color: #fff;
    margin-bottom: 20rem;
}

main .code {
    padding: 36rem 0 42rem 0;
}

main .code h2 {
    margin-bottom: 24rem;
}

main .code h2 span {
    color: #333;
}

main .wash-info {
    padding: 24rem 48rem 34rem 35rem;
}

main .wash-info h1,
main .car-info h1 {
    padding-bottom: 16rem;
    border-bottom: 7rem solid #f7f7f7;
}

main .wash-info p {
    margin-top: 24rem;
    padding: 0 15rem;
    font-size: 23rem;
}

main .wash-info p span {
    float: right;
    color: #adadad;
}

main .car-info {
    padding: 34rem 35rem 14rem 20rem;
}

main .car-info h1 {
    margin-bottom: 24rem;
}

main .car-info>div {
    padding: 0 15rem;
}

main .car-info p {
    font-size: 23rem;
    margin-bottom: 30rem;
}

main .car-info p span {
    float: right;
    color: #adadad;
}

main .car-info .car-img {
    margin-bottom: 16rem;
}

main .car-info img {
    width: 150rem;
    height: 150rem;
    vertical-align: middle;
    margin-bottom: 26rem;
    margin-right: 24rem;
}

footer {
    padding: 25rem 30rem;
    bottom: 0;
    width: 100%;
}

footer button {
    width: 190rem;
    height: 65rem;
    background-color: #1c70ef;
    border-radius: 40rem;
    border: 0;
    font-size: 24rem;
}
</style>